<template>  
    <view class="container">  
	<view class=" t-login">
		<view style="font-weight: bold; line-height: 40px;">
			账户余额
		</view>
		<view style="color: #E18D08; font-size: 30px;">
			<text style="font-size: 14px;">￥</text>{{user.balance}}
		</view>     
		<view>
			<form class="cl">
	<!-- 			<view class="t-a">
					<image src="/static/login/user.png"></image>
					<input type="number"  placeholder="请输入金额"  v-model="phone" />
				</view> -->
				<view class="t-a">
					<image src="/static/login/qb.png"></image>
					<input type="number" name="code" maxlength="6" placeholder="请输入金额" v-model="money" />
					<view @click="qb(user.balance)" class="t-c" >全部</view>
				</view>

			</form>
		</view>
		<view style="color: #E18D08; margin-bottom: 20px;">
			提示：临时账户{{user.poundage}}%
		</view>
		<view>
			<button @click="submit">确认转出</button>
		</view>
		</view>
		
		
		
		<view style="box-sizing: border-box;margin-top: 20px; border-radius: 14px; overflow: hidden; background: #fff;">
			<view style="box-sizing: border-box; padding: 10px 20px;">
				<u-section :show-line="false" :right="false" title="转出记录"  >
					<!-- <view >
						
					</view> -->
				</u-section>
			</view>
			<view style="text-align: center; line-height: 100px;" v-if="Data.length==0">
				暂无转出记录
			</view>
			
			<view>
				<u-cell-group>
					<u-cell-item v-for="(item,index) in Data" :arrow="false">
						<view style="margin-right: 10px;" slot="icon">
							<u-image shape="circle" width="50px" height="50px" src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"></u-image>
						</view>
						<view slot="title">
							申请金额{{item.withdrawal}}（到账金额{{item.actual_amount}}）
							<view style="color: #999;">
								{{item.poundage}}
							</view>
						</view>
						<view style="color:#E95800;" slot="right-icon">
							{{item.status=='applying'?'申请中':'已完成'}}
						</view>
					</u-cell-item>	
				</u-cell-group>							
			</view>
			
		</view>	
			<u-modal :show-cancel-button="true" v-model="show" @confirm="confirm" content="确认转出至当前登录的微信账户吗？"></u-modal>
			<!-- <u-popup v-model="show" mode="center">
				<view>
					
				</view>
			</u-popup> -->
    </view>  
</template>  
<script>  
	function tc(text){
		uni.showToast({
			title:text,
			icon: 'none'
		})
	}
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState, mapActions
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				show:false,
				Data:[],
				money:'',
				user:uni.getStorageSync('user'),
				page:1,
				openid:''
				
			}
		},
		onLoad(){
			uni.login({
			    success: res_login => {
			        console.log('-------获取code-------')
			        console.log(res_login);
					// https://api.weixin.qq.com/sns/jscode2session?appid=wxa7fb126763b982c8&secret=e87c7a0d00f28fa0e21635c64d2faef5&js_code=091aGKGa1r0zIC0Sy9Ha1bQkHk3aGKGt&grant_type=authorization_code
					// return false
					this.$http.post('getOpenIdByCode',{code:res_login.code}).then(res => {
						if(res.code==1){
							console.log(res)
							this.openid=res.data
							// this.wxpay(res.data.timeStamp,res.data.nonceStr,res.data.package,res.data.signType,res.data.paySign)
						}
					}).catch(e => {
					})
			    }
			});
		this.getWithdrawalList()
		},
		onReachBottom() {
			this.page++
			this.getWithdrawalList()
		},
        computed: {
		
		},
        methods: {
			qb(e){
				if(parseInt(e)>0){
				 return this.money=parseInt(e)	
				}
				tc( '可提现金额不足')
			},
			getWithdrawalList(){
				this.$http.post('getWithdrawalList',{page:this.page,num:10}).then(res => {
					// if(r)
					res.data.list.forEach((item)=>[
						this.Data.push(item)
					])
					// this.Data=res.data.list
				})
			},
			confirm(){
				this.$http.post('toWithdrawal',{money:this.money,openid:this.openid}).then(res => {
					if(res.code==1){
						uni.navigateBack({
							delta:1
						})
					}
					// if(r)
					
				})
			},
			submit(){
				if(parseInt(this.user.balance)>0){
				  return this.show=true	
				}
				tc( '可提现金额不足')
				// return false
				
			},
		},
		onShow() {
			
		},
		// onPullDownRefresh() {
			
		// }
    }  
</script>  
<style lang='scss'>
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	.list-cell {
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
				font-size: $font-base + 6upx;
			}
		}
	}
	.user-section{
		height: 520upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.info-box {
			display: flex;
			flex-direction: column;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
		.info-tips {
			font-size: $font-base;
			color: $base-color;
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}
		.iconfont{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.iconfont{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	.bq-selection {
	    padding: 15px 0 0;
		margin-top: 10px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #888;
		font-size: $font-base;
	}
</style>
